<template>
<div>
	<el-button>123456</el-button>
	<el-button type="primary">1</el-button>
	<el-button type="danger">2</el-button>
	<el-button type="default">3</el-button>
	<el-button type="success">4</el-button>
	<el-input v-model="data.input" type="password" placeholder="请输入密码"></el-input>
	<el-input v-model="data.input" type="textarea" placeholder="这是一个多行文本框"></el-input>
	<el-carousel indicator-position=""></el-carousel>
	<div>
		  <el-table :data="tableData" style="width: 100%">
		    <el-table-column prop="date" label="Date" width="180" />
		    <el-table-column prop="name" label="Name" width="180" />
		    <el-table-column prop="address" label="Address" />
			<el-pagination
			      v-model:current-page="currentPage4"
			      v-model:page-size="pageSize4"
			      :page-sizes="[100, 200, 300, 400]"
			      :disabled="disabled"
			      :background="background"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="400"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			    />
				
		  </el-table>
	</div>
</div>
<div style="margin: 30px;">
	<el-icon>
		<Edit/>
	</el-icon>
</div>
  
</template>
<script setup lang="ts">
	import{Calendar,Delete}from"@element-plus/icons-vue"
  import { ref } from "vue";
	const data=ref({
		input:'',
		about:['水水水','火火火','木木木']
	})
  const tableData = ref([
  ])
  const userGetallService =async function (){
    const data=await userGetallService()
    tableData.value=data
  }

	const currentPage1 = ref(5)
	const currentPage2 = ref(5)
	const currentPage3 = ref(5)
	const currentPage4 = ref(4)
	const pageSize2 = ref(100)
	const pageSize3 = ref(100)
	const pageSize4 = ref(100)
	const background = ref(false)
	const disabled = ref(false)
	
	const handleSizeChange = (val: number) => {
	  console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val: number) => {
	  console.log(`current page: ${val}`)
	}
</script>

<style scoped >
</style>